<!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>修改手机</title>
    <link rel="stylesheet" type="text/css" href="../../../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../../../css/style.css"/>
      <style>
      html,body{
          /*background: #fff;*/
      }
      .inner_header{
          font-size: 1.6rem;
          color: #000000;
          font-weight: 600;
          height: 6.9rem;
          margin: 0;
          padding: 2.4rem 0 0 0;
          box-sizing: border-box;
          background: none!important;
          box-shadow: 0rem 0rem 0.8rem 0rem rgba(0, 0, 0, 0.08);
          background: #fff!important;
      }
      .inner_header .right{
        font-size: 1.4rem;
        color: #6f6f6f;
      }
      .content{
        width: 100%;
        float: left;
        margin: 6.9rem 0 0 0;
      }
      .content_list{
          background: #fff;
          width: 100%;
          float: left;
          box-sizing: border-box;
          padding: 0 1.3rem 0 1.3rem;
      }
      .content .ash{
        background-color: #f2f2f2;
        width: 100%;
        font-size: 1.3rem;
        color: #999;
        margin-top: 1.25rem;
      }
      .content_li{
          float: left;
          width: 100%;
          height: 4.5rem;
          box-sizing: border-box;
          color: #999999;
          font-size: 1.5rem;
          line-height: 4.5rem;
          display: flex;
          text-align: center;
          border-bottom: 0.05rem solid #e6e6e6;
          box-sizing: border-box;
      }
      .content_li span{
        display: block;
        width: 10rem;
        margin-left: 3.75rem;
        color: #999;
      }
      .content_li .out{
        line-height: 4.45rem;
        height: 4.45rem;
        text-align: center;
        margin-top: 1.3rem;
      }
      .content_li .out img{
        width: 1.5rem;
        height: 1.5rem;
      }
      .content_li .left{
        display: flex;
        height: 4.25rem;
        line-height: 4.25rem;
        color: #1a1a1a;
        border-right: 0.1rem solid #f2f2f2;
        margin-right: 2rem;
      }
      .content_li .left img{
        width: 1.25rem;
        height: 0.8rem;
        margin: 1.65rem 2.5rem 0 0.4rem;
      }
      .content_li .text{
          line-height: 4.45rem;
          height: 4.45rem;
          flex: 1;
          font-size: 1.5rem;
      }
      </style>
  </head>
  <body>
      <div id="app">
        <header class="aui-bar aui-bar-nav aui-bar-light inner_header">
          <a class="aui-pull-left aui-btn" onclick="goBack()">
              <img src="../../../../image/back.png">
          </a>
          <div class="aui-title">修改手机</div>
          <a class="aui-pull-right share_nav_right right" onclick="go_url('code_phone','./code_phone.html')">
               下一步
          </a>
        </header>
        <div class="content">
          <div class="content_list ash">
            你的账号目前绑定手机号是15226092686，请输入你希望
绑定的手机号
          </div>
          <div class="content_list">
            <div class="content_li">
                当前手机号 <span>15226092686</span>
            </div>
            <div class="content_li">
                <div class="left">
                  中国+86 <img src="../../../../image/search_map.png" alt="">
                </div>
                <input type="text" placeholder="请输入新手机号" class="text"  @input="clickInput" ref="refcode" maxlength="11">
                <div class="out" v-if="open" @click="out">
                    <img src="../../../../image/capital/icon12.png" alt="#" >
                </div>
            </div>
          </div>
        </div>
      </div>
  </body>
  <script type="text/javascript" src="../../../../script/api.js"></script>
  <script type="text/javascript" src="../../../../script/zepto.js"></script>
  <script type="text/javascript" src="../../../../script/vue.min.js"></script>
  <script type="text/javascript" src="../../../../script/swiper.min.js"></script>
  <script type="text/javascript" src="../../../../script/utils.js"></script>
  <script type="text/javascript" src="../../../../script/common.js"></script>
  <script type="text/javascript" src="../../../../script/aui-tab.js"></script>
  <script type="text/javascript" src="../../../../script/aui-scroll.js"></script>
  <script type="text/javascript" src="../../../../script/aui-pull-refresh.js"></script>
  <script type="text/javascript">
      apiready = function(){

      };
      new Vue({
        el:"#app",
        data:{
          open:false,
        },
        methods:{
          clickInput:function(){
            var num = this.$refs.refcode.value
            if(num){
              this.open=true
            }
          },
          out:function(){
            this.$refs.refcode.value=[]
          }
        }
      })

      function go_url(name, url) {
          api.openWin({
              name: name,
              url: url,
              pageParam: {
                  data: ""
              }
          });
      }

      function goBack(name,url) {
        api.closeWin({});
      }
  </script>
  </html>
